<template>
	<view class="userInfo" hover-start-time=15 hover-stay-time=200 hover-class="bgcolor">
		<image :src="item.headPortrait"></image>
		<view class="nickNameGender">
			<text class="nickName">{{item.nickName}}</text>
			<uni-badge :text="item.age" :type="item.gender == 0 ? 'primary' :'error'" size="small"><text class="iconfont icon-xingbienan gender"
				 v-if="item.gender == 0"></text><text class="iconfont icon-xingbienv gender" v-else></text></uni-badge>
		</view>
		<view class="icon" :class="item.isFollow ? 'iconBg1': 'iconBg2'">
			<text class="iconfont icon-duigou1"></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: null
			},
			index: {
				type: Number,
				default: 0
			}
		},
	}
</script>

<style lang="scss">
	.userInfo {
		@include flexCenterCenter;
		padding: 25rpx 20rpx;
		border-bottom: 2rpx solid #E5E5E5;

		>image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.nickNameGender {
			display: flex;
			flex-direction: column;
			flex: 1;
		}

		.icon {
			@include flexCenterCenter;
			border-radius: 50%;
			width: 50rpx;
			height: 50rpx;

			>text {
				color: #FFFFFF;
			}
		}
	}

	.iconBg1 {
		background-color: #7E7C7D;
	}

	.iconBg2 {
		background-color: #FF4A6A;
	}

	// 自定义的角标的样式
	.uni-badge {
		width: 95rpx !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.gender {
		display: inline-block;
		height: 100%;
		margin-right: 6rpx;
	}
</style>
